/*
 * @Author: your name
 * @Date: 2021-04-30 10:21:08
 * @LastEditTime: 2022-04-08 09:43:46
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \react-gu-li\src\pages\charts\pie.jsx
 */
import React, { Component } from 'react'
import * as echarts from "echarts/lib/echarts";
import { PieChart } from 'echarts/charts';
echarts.use([PieChart]);
export default class Pie extends Component {
    componentDidMount() {
		// 初始化echarts实例，将其挂载到id为main的dom元素上展示 
		var myChart = echarts.init(document.getElementById("main"));
		// 绘制图表 
		myChart.setOption({
            
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  top: '5%',
                  left: 'center'
                },
                series: [
                  {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                    },
                    label: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                      }
                    },
                    labelLine: {
                      show: false
                    },
                    data: [
                      { value: 1048, name: 'Search Engine' },
                      { value: 735, name: 'Direct' },
                      { value: 580, name: 'Email' },
                      { value: 484, name: 'Union Ads' },
                      { value: 300, name: 'Video Ads' }
                    ]
                  }
                ]
		})
	}
    render() {
        return (
            <div id = "main"
            style = {
                {
                    width: '100%',
                    height: '100%'
                }
            }> </div>
        )
    }
}
